<template>
  <div class="content">
    <div class="loading">
      <div v-for="item in dotNum" :key="item" class="dot"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
const dotNum = 30;
</script>

<style lang="scss" scoped>
$containerSize: 300px;
$ballSize: 12px;
$n: 30;
$pDeg: 360deg / $n;
.content {
  width: 100%;
  height: 900px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00bcd4;
  .loading {
    width: $containerSize;
    height: $containerSize;
    // background-color: aqua;
    border-radius: 50%;
    position: relative;
    .dot {
      position: absolute;
      width: $ballSize;
      height: $ballSize;
      //   background-color: red;
      left: 50%;
      top: 0;

      transform-origin: center $containerSize/2;
      @for $i from 1 through $n {
        &:nth-child(#{$i}) {
          transform: translateX(-50%) rotate(($i - 1) * $pDeg);
          &::before,
          &::after {
            animation-delay: -2s / $n * ($i - 1) * 6;
          }
        }
      }

      perspective: 70px;
      transform-style: preserve-3d;
      &::before,
      &::after {
        content: '';
        position: absolute;
        width: $ballSize;
        height: $ballSize;
        border-radius: 50%;
      }

      &::before {
        top: 100%;
        background-color: #fff;
        animation: move-white 2s infinite;
        @keyframes move-white {
          0% {
            animation-timing-function: ease-in;
          }
          25% {
            animation-timing-function: ease-out;
            transform: translate3d(0, -100%, -$ballSize);
          }
          50% {
            animation-timing-function: ease-in;
            transform: translate3d(0, -200%, 0);
          }
          75% {
            animation-timing-function: ease-out;
            transform: translate3d(0, -100%, $ballSize);
          }
          100% {
            animation-timing-function: ease-in;
            transform: translate3d(0, 0%, 0);
          }
        }
      }
      &::after {
        top: -100%;
        background-color: #000;
        animation: move-black 2s infinite;
        @keyframes move-black {
          0% {
            animation-timing-function: ease-in;
          }
          25% {
            animation-timing-function: ease-out;
            transform: translate3d(0, 100%, $ballSize);
          }
          50% {
            animation-timing-function: ease-in;
            transform: translate3d(0, 200%, 0);
          }
          75% {
            animation-timing-function: ease-out;
            transform: translate3d(0, 100%, -$ballSize);
          }
          100% {
            animation-timing-function: ease-in;
            transform: translate3d(0, 0%, 0);
          }
        }
      }
    }
  }
}
</style>
